<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div .img{
				border: 1px solid #ccc;
			}
			div .img:hover{
				border: 1px solid #777;
			}
			div .img img{
				width: 100%;
				height: auto;
			}
			div .desc{
				padding: 15px;
				text-align: center;
			}
			*{
				box-sizing: border-box;
			}
			.responsive{
				padding: 0 6px;
				float: left;
				width: 25%;
			}
			@media only screen and (max-width: 700px){
				.responsive{
					width: 50%;
					margin: 6px 0;
				}
			}
			
			@media only screen and (max-width: 500px){
				.responsive{
					width: 100%;
				}
			}
			
			.capitalize::after{
				content: "";
				display: table;
				clear: both;
			}
			
		</style>
	</head>
	<body>
		<div class="responsive">
			<div class="img">
				<a href="javaScript:void(0);">
					<img src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg"/>
				</a>
				<div class="desc">
					xxxxxxxxxxxxxxxxx
				</div>
			</div>
		</div>
		
		<div class="responsive">
			<div class="img">
				<a href="javaScript:void(0);">
					<img src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg"/>
				</a>
				<div class="desc">
					xxxxxxxxxxxxxxxxx
				</div>
			</div>
		</div>
		
		<div class="responsive">
			<div class="img">
				<a href="javaScript:void(0);">
					<img src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg"/>
				</a>
				<div class="desc">
					xxxxxxxxxxxxxxxxx
				</div>
			</div>
		</div>
		
		<div class="responsive">
			<div class="img">
				<a href="javaScript:void(0);">
					<img src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg"/>
				</a>
				<div class="desc">
					xxxxxxxxxxxxxxxxx
				</div>
			</div>
		</div>
	</body>
</html>